import * as React from "react";
import { Input, Image, Divider } from "antd";
import { Link, Route } from "react-router-dom";
import ReadHome from "./compoents/home";
import MeLook from "./compoents/melook";
import MovieNews from "./movie-news";
import "./index.scss";
// import { AudioOutlined } from '@ant-design/icons';

const { Search } = Input;

export interface ReadProps {}

export interface ReadState {
  navList: NavItem[];
}

interface NavItem {
  tit: string;
  link: string;
}

class Read extends React.Component<ReadProps, ReadState> {
  constructor(props: ReadProps) {
    super(props);
    this.state = {
      navList: [
        {
          tit: "我看",
          link: "/melook",
        },
        {
          tit: "影讯&购票 ",
          link: "/movie-news",
        },
        {
          tit: "选电影",
          link: "/sel-movie",
        },
        {
          tit: "电视剧",
          link: "/teleplay",
        },
        {
          tit: "排行榜",
          link: "/ranking",
        },
      ],
    };
  }

  render() {
    return (
      <div className="read">
        <div className="head">
          <div className="f" style={{ width: 1040, margin: "0 auto", padding: "10px 0 5px 0" }}>
            <Image preview={false} style={{ marginRight: 20 }} src="https://img3.doubanio.com/dae/accounts/resources/d3e2921/book/assets/lg_book_a11_1.png?s=1" />
            <Search placeholder="书名 作者 ISBN" />
          </div>
          <Divider style={{ height: 1, background: "#e5ebe4" }} />
          <nav className="read-nav">
            <ul>
              {this.state.navList.map((Item) => {
                return (
                  <Link to={"/read" + Item.link} key={Item.tit}>
                    {Item.tit}
                  </Link>
                );
              })}
            </ul>
          </nav>
        </div>
        <div className="main">
          <Route exact path="/read/">
            <ReadHome />
          </Route>
          <Route exact path="/read/melook">
            <MeLook />
          </Route>
          <Route exact path="/read/movie-news">
            <MovieNews />
          </Route>
        </div>
      </div>
    );
  }
}
export default Read;
